<template>
  <smart-page>
    <template #actions>
<!--      <a-button v-auth="Acl.MEMBER_PROFILE_MAIN_DELETE" :disabled="selectedKeys.length === 0" @click="onDelete()">-->
<!--        批量删除-->
<!--      </a-button>-->
      <a-button v-auth="Acl.MEMBER_PROFILE_MAIN_ADD" status="danger" :type="'primary'" @click="editCtr.open()">
        添加企业会员
      </a-button>
      <a-button v-auth="Acl.MEMBER_PROFILE_MAIN_GENERATED" type="primary" @click="readCtr.open()">生成虚拟会员
      </a-button>
    </template>

    <template #search>
      <smart-search :query-array="MAIN_SEARCH" @on-handler="onSearch"/>
    </template>

    <a-table v-model:selectedKeys="selectedKeys"
             :table-layout-fixed="theme.layoutFixed"

             :columns="BASIC_MAIN_COLUMNS"
             :row-key="rowKey"
             :column-resizable="theme.resizable"
             :bordered="theme.bordered"
             :stripe="theme.stripe"
             :sticky-header="theme.sticky"
             :hoverable="theme.hoverAble"
             :pagination="pagination"
             :loading="theme.loading"
             :data="dataSource"
             @page-change="onPageChange" @page-size-change="onPageSizeChange">
      <template #firmAttr="{ record }">

        <a-tag color="green" v-if="record.firmAttr.checked">是</a-tag>
        <a-tag v-else>否</a-tag>
      </template>

      <template #inviterInfoName="{ record }">
        <p v-if="record.inviteMode === 'B2C'">{{record.inviterInfo.name}} </p>
        <p v-if="record.inviteMode === 'C2C'">{{record.inviterInfo.nickName}} </p>
        <p v-if="EmptyUtil.isEmptyObject(record.inviterInfo)">无</p>
      </template>
      <template #inviteMode="{ record }">
        <p v-if="EmptyUtil.isEmptyObject(record.inviteMode)">无</p>
        <p v-else>{{ record.inviteMode }}</p>
      </template>
      <template #inviterInfoPhone="{ record }">
        <p v-if="record.inviteMode === 'B2C'">{{record.inviterInfo.phone}} </p>
        <p v-if="record.inviteMode === 'C2C'">{{record.inviterInfo.phoneNumber}} </p>
        <p v-if="EmptyUtil.isEmptyObject(record.inviterInfo)">无</p>
      </template>
      <template #action="{ record }">
        <a-space size="mini">
          <!--                    <a-link @click="detailCtr.open(record)"> 详情</a-link>-->
          <a-link v-auth="Acl.MEMBER_PROFILE_MAIN_UPDATE_REMARKS" @click="remarksCtr.open(record)"> 备注</a-link>
          <a-link v-if="record.firmAttr.checked" @click="editCtr.open(record)" v-auth="Acl.MEMBER_PROFILE_MAIN_UPDATE">
            编辑
          </a-link>
          <a-link v-if="!record.realAttr" status="danger" @click="onDelete(record)"
                  v-auth="Acl.MEMBER_PROFILE_MAIN_DELETE"> 删除
          </a-link>
<!--          <a-popconfirm position="lb" ok-text="确认清除" :content="'您确定要删除'+record.nickName+'玩家的猪仔数据吗?'"-->
<!--                        @ok="onDelClear(record.id)">-->
<!--            <a-link v-auth="Acl.MEMBER_PROFILE_MAIN_INITIALIZATION"> 清空猪仔数据</a-link>-->
<!--          </a-popconfirm>-->

        </a-space>
      </template>
      <template #remarks="{record}">
<!--        {{ record.remarks   }}-->
        {{ EmptyUtil.isEmptyObject(record.remarks)?'暂无':record?.remarks.replace(/<.*?>/g,"") }}
      </template>
    </a-table>
    <edit-modal v-if="editCtr.show" :record="editCtr.record" @cancel="editCtr.close"/>
    <generated-modal v-if="readCtr.show" :record="readCtr.record" @cancel="readCtr.close"/>
    <detail-modal v-if="detailCtr.show" :record="detailCtr.record" @cancel="detailCtr.close"/>
    <remarks-modal v-if="remarksCtr.show" :record="remarksCtr.record" @cancel="remarksCtr.close"/>
  </smart-page>
</template>
<script lang="ts" setup name="member-basic-main">
import {onMounted, reactive} from 'vue';
import {BASIC_MAIN_COLUMNS} from "@/pages/modules/member/profile/resource/colums";
import {MAIN_SEARCH} from "@/pages/modules/member/profile/resource/search";
import {TablePage} from "@/libs/core";
import {SystemHttp} from "../resource/http";
import EditModal from './edit.vue'
import GeneratedModal from './generated.vue'
import DetailModal from './detail.vue'
import RemarksModal from './remarks.vue'
import {MsgUtil, StrUtil,EmptyUtil} from "@/utils";
import {Acl} from "@/libs/acl";

const pageConfig = {title: '会员资料', rowKey: 'id', nameKey: 'nickName'}
const {getMainPage, delMain, initialization} = SystemHttp
const tablePage = new TablePage(pageConfig).setFetchXhr(getMainPage).setDeleteXhr(delMain).setPermission(Acl.MEMBER_PROFILE_MAIN_PAGE_LIST);

const {theme, pagination, rowKey, dataSource, rowSelection, selectedKeys, editCtr, readCtr} = tablePage
const {onFetch, onPageChange, onPageSizeChange, onDelete, onSearch} = tablePage


const onDelClear = async (id) => {
  const {code} = await initialization(id);
  if (code === 0) {
    MsgUtil.alert("操作成功!", "清除猪仔成功!")
    onFetch()
  }

}

const detailCtr = reactive({
  show: false,
  record: {},
  open: (record) => {
    detailCtr.record = record
    detailCtr.show = true
  },
  close: () => {
    detailCtr.record = {}
    detailCtr.show = false
  }
})


const remarksCtr = reactive({
  show: false,
  record: {},
  open: (record) => {
    remarksCtr.record = record
    remarksCtr.show = true
  },
  async close(e: string) {
    remarksCtr.show = false;
    remarksCtr.record = null;
    if (e !== 'NONE') await onFetch()
  }
})


onMounted(() => onFetch())
</script>

